import { Menu, Icon, Input } from "ant-design-vue";

const { Item, ItemGroup, SubMenu } = Menu;
const { Search } = Input;

export default {
  name: "Tree",
  props: {
    dataSource: {
      type: Array,
      required: true
    },
    openKeys: {
      type: Array,
      default: () => []
    },
    search: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.localOpenKeys = this.openKeys.slice(0);
  },
  data() {
    return {
      localOpenKeys: []
    };
  },
  methods: {
    handlePlus(item) {
      this.$emit("add", item);
    },
    handleTitleClick(...args) {
      this.$emit("titleClick", { args });
    },

    renderSearch() {
      return (
        <Search
          placeholder="input search text"
          style="width: 100%; margin-bottom: 1rem"
        />
      );
    },
    renderIcon(icon) {
      return (icon && <Icon type={icon} />) || null;
    },
    renderMenuItem(item) {
      return (
        <Item key={item.key}>
          {this.renderIcon(item.icon)}
          {item.title}
          <a
            class="btn"
            style="width: 20px;z-index:1300"
            {...{ on: { click: () => this.handlePlus(item) } }}
          >
            <a-icon type="plus" />
          </a>
        </Item>
      );
    },
    renderItem(item) {
      return item.children
        ? this.renderSubItem(item, item.key)
        : this.renderMenuItem(item, item.key);
    },
    renderItemGroup(item) {
      const childrenItems = item.children.map(o => {
        return this.renderItem(o, o.key);
      });

      return (
        <ItemGroup key={item.key}>
          <template slot="title">
            <span>{item.title}</span>
            <a-dropdown>
              <a class="btn">
                <a-icon type="ellipsis" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item key="1">新增</a-menu-item>
                <a-menu-item key="2">合并</a-menu-item>
                <a-menu-item key="3">移除</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
          {childrenItems}
        </ItemGroup>
      );
    },
    renderSubItem(item, key) {
      const childrenItems =
        item.children &&
        item.children.map(o => {
          return this.renderItem(o, o.key);
        });

      const title = (
        <span slot="title">
          {this.renderIcon(item.icon)}
          <span>{item.title}</span>
        </span>
      );

      if (item.group) {
        return this.renderItemGroup(item);
      }
      // titleClick={this.handleTitleClick(item)}
      return (
        <SubMenu key={key}>
          {title}
          {childrenItems}
        </SubMenu>
      );
    }
  },
  render() {
    const { dataSource, search } = this.$props;

    // this.localOpenKeys = openKeys.slice(0)
    const list = dataSource.map(item => {
      return this.renderItem(item);
    });

    return (
      <div class="tree-wrapper">
        {search ? this.renderSearch() : null}
        <Menu
          mode="inline"
          class="custom-tree"
          {...{
            on: {
              click: item => this.$emit("click", item),
              "update:openKeys": val => {
                this.localOpenKeys = val;
              }
            }
          }}
          openKeys={this.localOpenKeys}
        >
          {list}
        </Menu>
      </div>
    );
  }
};
